<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchData" size="small" ref="" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item>
              <el-button type="primary" @click="addFrom()" icon="el-icon-plus"  v-has="'projectConfig:fromConfig:add'">发布表单</el-button>
            </el-form-item>
            <el-form-item prop="title">
              <el-input v-model="searchData.title" clearable placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item prop="createTime">
              <el-date-picker v-model="createTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="创建开始日期" end-placeholder="创建结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <!-- <el-button icon="el-icon-refresh" size="small" @click="resetSearch()">重置</el-button> -->
            </el-form-item>
          </el-form>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;" border :height="tableHeight" stripe v-loading="loading">
            <el-table-column prop="code" label="配置表号" width="200" align="center"></el-table-column>
            <el-table-column prop="title" label="配置标题" width="200" align="center"> </el-table-column>
            <el-table-column prop="activityName" label="活动主题" width="120" align="center"> </el-table-column>
            <el-table-column prop="publishUserPhone" label="发布号(手机号)" width="138" align="center"> </el-table-column>
            <el-table-column prop="remark" label="备注" align="center"></el-table-column>
            <el-table-column prop="createTime" sortable label="发布时间" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center" width="120">
              <template #default="scope">
                <div class="d-flex justify-center">
                  <MySwitch :value.sync="scope.row.status" :id="scope.row.status" text="启用|禁用" textValue="1|0"
                    @changeStatus="handleChangeStatus(scope.row)"
                    :permission="hasBtn('operatingTools:couponAllocation:status')"></MySwitch>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" width="150" align="center" fixed="right">
              <template #default="scope">
                <div class="verticalBtn">
                  <el-button size="medium" type="text" icon="el-icon-notebook-1" @click="editFrom(scope.row)" v-has="'projectConfig:fromConfig:edit'">修改
                  </el-button>
                  <el-button size="medium" type="text" icon="el-icon-circle-plus-outline" @click="lookItemFrom(scope.row)">
                    查看</el-button>

                  <el-button size="medium" type="text" icon="el-icon-s-order" @click="handleDetail(scope.row)" v-has="'projectConfig:fromConfig:delt'">删除
                  </el-button>
                </div>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination v-show="total" :total="total" :page.sync="searchData.pageNum" :limit.sync="searchData.pageSize"
            @pagination="dataInfo" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    configFormList,
    configFormDel,
    configFormEdit
  } from '@/api/getData';
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        btnLoading: false,
        createTime: [],
        total: 0,
        tableColumn: [],
        hideTableColumn: [],
        /*自定义表格列需要隐藏的*/
        tableColumnType: 'staffManagement',
        /*自定义表格列类型传参*/
        tableHeight: 0, //table 高度
        statusList: [{
          id: '1',
          name: '待审核'
        }, {
          id: '2',
          name: '审核通过'
        }, {
          id: '3',
          name: '审核失败'
        }],
        dataList: [],

        multipleSelection: '',
        dialogTitle: '',
        detailVisible: false,
        statusRow: {},
        searchData: {
          "isAsc": "",
          "pageNum": 1,
          "pageSize": 10,
          "title": null
        }
      }
    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
        this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - 75;
      })
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    methods: {

      async dataInfo() {
        try {
          this.loading = true;
          let data = this.addDateRange(this.searchData, this.createTime, 'createTimeStart', 'createTimeEnd');
          const result = await configFormList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      // 搜索
      handleSearch() {
        this.searchData.pageNum = 1;
        this.dataInfo();
      },
      // 重置表单
      resetSearch() {
        this.createTime = [];
        this.searchData = {
          "isAsc": "",
          "pageNum": 1,
          "pageSize": 10,
          "title": null
        }
        this.dataInfo();
      },
      // 启用禁用表单
      handleChangeStatus(e) {
        e.status == '1' ? '0' : '1';
        console.log(e.status)
        configFormEdit({
          id: e.id,
          status: e.status
        }).then(res => {
          console.log(res)
          if (res.code == '200') {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.dataInfo();
          } else {
            this.$message.error(res.msg);
          }
        })
      },
      // 发布表单
      addFrom() {
        this.$router.push({
          path: '/projectConfig/addFrom'
        });
      },
      // 删除表单
      handleDetail(row) {
        this.$confirm('您确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          configFormDel(row.id).then(res => {
            if (res.code == 200) {
              this.dataInfo()
              this.$message({
                message: res.msg,
                type: 'success'
              });
            }
          })
        }).catch((err) => {
          console.log(err);
        });
      },
      handleSearch() {
        this.searchData.pageNum = 1;
        this.dataInfo();
      },
      // 修改
      editFrom(row) {
        this.$router.push({
          path: '/projectConfig/addFrom?id=' + row.id
        });
      },
      /** 查看 **/
      lookItemFrom(row) {
        this.$router.push({
          path: '/projectConfig/lookFrom?id=' + row.id
        });
      },
      /** 表格选中状态改变 **/
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    }
  }
</script>

<style scoped lang="scss">
  .title {
    text-align: center;
    margin: 5px 0;
  }

  .el-table .el-dropdown-link {
    cursor: pointer;
    color: #61997A;
    margin-left: 5px;
  }

  .leftDialog {
    height: 540px;
    overflow-y: auto;
  }

  .activeVerticalBox .activeItem {
    color: #61997A;
    cursor: pointer;
    margin: 0px;
    text-align: center;
    height: 20px;
    line-height: 20px;
  }

  .activeVerticalBox .el-dropdown {
    display: flex;
    justify-content: center;
    color: #61997A;
    cursor: pointer;
  }

  .activeCheckedBox {
    border-top: 1px solid #ddd;
    padding: 10px;
    height: 52px;

    .el-tag {
      margin-right: 10px;
    }
  }
</style>
